<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>Document</title>
    <!-- 引入less文件 -->
    <link rel="stylesheet" type="text/less" href="./less/magnifier.less" />
    <!-- 开源js文件 -->
    <script src="./js/less.js"></script>
  </head>
  <body>
    <div class="box">
      <div class="leftBox">
        <!-- <img src="./pjg1.jpg"> -->
        <div class="magnifier"></div>
      </div>
      <div class="rightBox">
        <img class="img2" src="./img/pjg1.jpg" />
      </div>
    </div>

    <script src="./js/utils.js"></script>
    <script>
      //大框
      var leftBox = document.querySelector(".leftBox");
      //小框
      var magnifier = document.querySelector(".magnifier");
      //放大显示框
      var rightBox = document.querySelector(".rightBox");

      var img2 = document.querySelector(".rightBox img");

      //移入
      //鼠标移入小框跟放大显示框显示
      leftBox.onmouseenter = function () {
        
        magnifier.style.display = "block";
        rightBox.style.display = "block";
      };
      //鼠标移出的时候小框跟大显示框隐藏；
      leftBox.onmouseleave = function () {
        magnifier.style.display = "none";
        rightBox.style.display = "none";
      };

      //鼠标在大框里面移动触发事件
      leftBox.onmousemove = function (e) {
        //添加一个事件触发对象e
        //计算鼠标在页面的x轴的位置 - offset封装函数计算好的触发元素到body的距离 -
        //leftbox 里面的小框自生内容区的宽度/2   /2 :为了能让鼠标在小框的中心位置

        var left = e.pageX - offset(leftBox).left - magnifier.clientWidth /2;
        // console.log(left);
        var top = e.pageY - offset(leftBox).top - magnifier.clientHeight /2 ;
        // console.log(top);
        //允许移动的范围
        if (left <= 0) {
          left = 0;
        }
        if (left >= leftBox.clientWidth - magnifier.clientWidth) {
          left = leftBox.clientWidth - magnifier.clientWidth;
        }
        if (top <= 0) {
          top = 0;
        }
        if (top >= leftBox.clientHeight - magnifier.clientHeight) {
          top = leftBox.clientHeight - magnifier.clientHeight;
        }

        //记录小框的位置
        magnifier.style.left = left + "px";
        magnifier.style.top = top + "px";

        //计算出左侧图片的比例
        //用计算出小框在左侧大框的距离 去除以（左侧自身的宽度减去小框自身的宽度）
        //鼠标在触发元素的xy的坐标位置  / （左侧大框自身的宽度-左侧移动小框自生的宽度）
        //                                得出剩下可移动的距离
        var left_X = left / (leftBox.clientWidth - magnifier.clientWidth);
        var left_Y = top  / (leftBox.clientHeight - magnifier.clientHeight);

        //右侧图片自身的宽度-右侧框的自身的宽度 * 左侧计算出的比例
        var right_X = (img2.clientWidth - rightBox.clientWidth) * left_X;
        var right_Y = (img2.clientHeight - rightBox.clientHeight) * left_Y;

        //右侧图片的移动左侧小框移动是相反的所以要取反
        img2.style.left = -right_X + "px";
        img2.style.top  = -right_Y + "px";
      };
    </script>
  </body>
</html>
